<template>
    <div class="loginBox">
        <h2>管理员登录</h2>
        <form onsubmit="return false">
            <div class="item">
                <input type="text" v-model="account" id="account">
                <label for="account">账号</label>
            </div>
            <div class="item">
                <input type="text" v-model="email" >
                <label for="">邮箱</label>
            </div>
            <div class="item">
                <input type="text" v-model="code" >
                <label for="">验证码</label>
            </div>
            <div class="item">
                <input type="password" v-model="password" >
                <label for="">密码</label>
            </div>
            <button class="btn" @click="login">登录
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </button>
            <span style="display: inline-block;width: 30px;">

            </span>
            <button class="btn" @click="getCode">获取验证码
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </button>
        </form>
    </div>

  </template>
  
  <script>
  import loginApi from '@/api/loginApi';
  export default {
    data(){
        return {
            account:undefined,
            password:undefined,
            email:undefined,
            code:undefined
        }
    },
    methods:{
        login(){
            if(this.account==undefined || this.account==''){
                this.$message({
                    message: '请输入账号',
                    type: 'error'
                });
                return;
            }
            if(this.email==undefined || this.email==''){
                this.$message({
                    message: '请输入邮箱',
                    type: 'error'
                });
                return;
            }
            // code验证
            if(this.code==undefined || this.code==''){
                this.$message({
                    message: '请输入验证码',
                    type: 'error'
                });
            }
            if(this.password==undefined || this.password==''){
                this.$message({
                    message: '请输入密码',
                    type: 'error'
                });
                return;
            }

            loginApi.login({
                account:this.account,
                password:this.password,
                captcha:this.code
            }).then((res)=>{
                // 跳转到主页面,通过window
                console.log("登陆中")
                console.log(res.data)
                // 设置token
                localStorage.setItem('token',res.data.token)
                localStorage.setItem('rule',res.data.role[0])
                // 弹出确认框，登陆中
                // this.$alert('提示信息', '登陆中', {
                //     confirmButtonText: '确定'
                // });

                window.location.href='/schoolET/adminDetail'
                // this.$router.replace('/schoolET/adminDetail')


            })

        },
        getCode(){
            if(this.account==undefined || this.account==''){
                this.$message({
                    message: '请输入账号',
                    type: 'error'
                });
                return;
            }
            if(this.email==undefined || this.email==''){
                this.$message({
                    message: '请输入邮箱',
                    type: 'error'
                });
                return;
            }
            loginApi.code({
                account:this.account,
                email:this.email
            }).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '验证码已发送',
                        type: 'success'
                    });
                }else{
                    this.$message({
                        message: '验证码发送失败',
                        type: 'error'
                    });
                }
            })

        }
    }
  };
  </script>
<style>
* {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        input,
        button {
            background: transparent;
            border: 0;
            outline: none;
        }

        body {
            height: 100vh;
            background: linear-gradient(#141e30, #243b55);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: #03e9f4;
        }

        .loginBox {
            width: 400px;
            height: 600px;
            background-color: #0c1622;
            margin: 100px auto;
            border-radius: 10px;
            box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6);
            padding: 40px;
            box-sizing: border-box;
        }

        h2 {
            text-align: center;
            color: aliceblue;
            margin-bottom: 30px;
            font-family: 'Courier New', Courier, monospace;
        }

        .item {
            height: 45px;
            border-bottom: 1px solid #fff;
            margin-bottom: 40px;
            position: relative;
        }

        .item input {
            width: 100%;
            height: 100%;
            color: #fff;
            padding-top: 20px;
            box-sizing: border-box;
        }
        /* .item input:valid+label  */
        .item input:focus+label{
            top: 0px;
            font-size: 8px;
        }

        .item label {
            position: absolute;
            left: 0;
            top: 0px;
            transition: all 0.5s linear;
        }

        .btn {
            padding: 10px 20px;
            margin-top: 30px;
            color: #03e9f4;
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 2px;
            left: 15%;
        }

        .btn:hover {
            border-radius: 5px;
            color: #fff;
            background: #03e9f4;
            box-shadow: 0 0 5px 0 #03e9f4,
                0 0 25px 0 #03e9f4,
                0 0 50px 0 #03e9f4,
                0 0 100px 0 #03e9f4;
            transition: all 1s linear;
        }

        .btn>span {
            position: absolute;
        }

        .btn>span:nth-child(1) {
            width: 100%;
            height: 2px;
            background: -webkit-linear-gradient(left, transparent, #03e9f4);
            left: -100%;
            top: 0px;
            animation: line1 1s linear infinite;
        }

        @keyframes line1 {

            50%,
            100% {
                left: 100%;
            }
        }

        .btn>span:nth-child(2) {
            width: 2px;
            height: 100%;
            background: -webkit-linear-gradient(top, transparent, #03e9f4);
            right: 0px;
            top: -100%;
            animation: line2 1s 0.25s linear infinite;
        }

        @keyframes line2 {

            50%,
            100% {
                top: 100%;
            }
        }

        .btn>span:nth-child(3) {
            width: 100%;
            height: 2px;
            background: -webkit-linear-gradient(left, #03e9f4, transparent);
            left: 100%;
            bottom: 0px;
            animation: line3 1s 0.75s linear infinite;
        }

        @keyframes line3 {

            50%,
            100% {
                left: -100%;
            }
        }

        .btn>span:nth-child(4) {
            width: 2px;
            height: 100%;
            background: -webkit-linear-gradient(top, transparent, #03e9f4);
            left: 0px;
            top: 100%;
            animation: line4 1s 1s linear infinite;
        }

        @keyframes line4 {

            50%,
            100% {
                top: -100%;
            }
        }


</style>